import React, { Component } from 'react';
import {Form, Card, Button, Row, Col,Table} from 'antd';
import NewsService from '../../service/NewsService';
import moment from 'moment';
export default class NewsView extends Component {

    state = {
        title:'News详情',
        data:{},
        loading:false,
        formItems: [
            {name: '新闻ID', type: 'text', fieldName: 'id'},
            {name: '标题', type: 'text', fieldName: 'title'},
            {name: '图片1', type: 'img', fieldName: 'pic1'},
            {name: '图片2', type: 'img', fieldName: 'pic2'},
            {name: '图片3', type: 'img', fieldName: 'pic3'},
            {name: '类型', type: 'text', fieldName: 'type'},
            {name: '链接路径', type: 'text', fieldName: 'source'},
            {name: '链接分享路径', type: 'text', fieldName: 'shareUrl'},
            {name: '是否置顶', type: 'text2', fieldName: 'topmost'},
            {name: '创建时间', type: 'text3', fieldName: 'createTime'},
            {name: '更新时间', type: 'text3', fieldName: 'updateTime'},
        ],
    };

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        let id = this.props.match.params.id;
        this.fetch(id);
    }

    fetch(id){
        this.setState({
            loading: true
        });
        NewsService.getOne(id).done((res)=>{
            this.setState({data:res.entity,loading: false});
        });
    }

    //页面渲染
    render() {
        return (
            <Card title={this.state.title}>
                <Form>
                    {this.state.formItems.map((item,i)=>{
                        if(item.type==='text'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]}</span>
                                </div>
                            )
                        }else if(item.type==='text2'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]?'是':'否'}</span>
                                </div>
                            )
                        }else if(item.type==='text3'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    <span className="view-item-text">{this.state.data[item.fieldName]?moment(this.state.data[item.fieldName]).format('YYYY-MM-DD'):''}</span>
                                </div>
                            )
                        }
                        else if(item.type==='img'){
                            return(
                                <div className="view-item" key={i}>
                                    <span className="view-item-name">{item.name+'：'}</span>
                                    {this.state.data[item.fieldName]?<img className="view-item-img" src={this.state.data[item.fieldName]}/>:''}
                                </div>
                            )
                        }
                    })}
                    <Form.Item>
                        <Button type="primary" icon="arrow-left" onClick={()=>{this.props.history.goBack()}}>返回</Button>
                    </Form.Item>
                </Form>
            </Card>
        );
    }
}